<template>
  <div>
    <h2>{{name}}-{{age}}</h2>
    <button @click="changeAge">变老</button>
  </div>
</template>

<script>
import { reactive , toRefs } from 'vue';
export default {
  setup(){
    const info = reactive({name: "wmy",age: 18});
    //toRefs将reactive对象中所有属性转成Ref, 建立连接
    //用torefs函数进行解构，能做到响应式
    let {name, age} = toRefs(info);

    //toRef 只转换对象中其中一个，建立连接
    // let age = toRef(info,"aeg");


    const changeAge = () =>{
      //应该对value进行++
      age.value++;
    }
    return{
      name,
      age,
      changeAge
    }
  }

}
</script>

<style scoped>

</style>